<template>
  <div class="main-box activity">
    <div class="main">
      <div class="middle">
        <div class="left">
          <el-map
            ref="map"
            :loading.sync="mapLoading"
            v-loading="allLoading"
            element-loading-background="rgba(0, 0, 0, 0)"
          ></el-map>
        </div>
        <div class="right">
          <p class="refresh">数据每隔五分钟自动刷新<button class="btn1" @click="refresh"><i class="iconfont">&#xe667;</i>刷新</button></p>
          <ul class="ranking">
            <li>
              <h3 class="title"><em></em>以平均睡眠时长排名</h3>
              <div class="content">
                <el-line
                  :xData="averageSleep.xData"
                  :data="averageSleep.data"
                  :yName="averageSleep.yName"
                  :color="averageSleep.color"
                  v-if="averageSleep.data[0].value.findIndex(v => v !== 0) !== -1"
                >
                </el-line>
                <no-data v-else :item="'平均睡眠'" />
              </div>
            </li>
            <li>
              <h3 class="title"><em></em>以平均运动强度排名</h3>
              <div class="content">
                <el-line
                  :xData="averageExercise.xData"
                  :data="averageExercise.data"
                  :yName="averageExercise.yName"
                  :color="averageExercise.color"
                  :grid="{
                    top: '20%',
                    left: '0%',
                    right: '0%',
                    bottom: '10%',
                    containLabel: true
                  }"
                  v-if="averageExercise.data[0].value.findIndex(v => v !== 0) !== -1 && averageExercise.data[1].value.findIndex(v => v !== 0) !== -1 && averageExercise.data[2].value.findIndex(v => v !== 0) !== -1"
                >
                </el-line>
                <no-data v-else :item="'平均运动强度'" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="line"></div>
      <div class="bottom">
        <ul class="statistics">
          <li>
            <h3 class="title"><em></em>睡眠情况分布</h3>
            <div class="content">
              <pie
                :data="sleepQuality.data"
                :color="sleepQuality.color"
                :title="sleepQuality.title"
                v-if="sleepQuality.data[0].name !== '暂无数据'"
              ></pie>
              <no-data v-else :item="'睡眠情况'" />
            </div>
          </li>
          <li>
            <h3 class="title"><em></em>运动情况分布</h3>
            <ul class="content">
              <pie
                :data="sportQuality.data"
                :color="sportQuality.color"
                :title="sportQuality.title"
                v-if="sportQuality.data[0].name !== '暂无数据'"
              ></pie>
              <no-data v-else :item="'运动情况'" />
            </ul>
          </li>
          <li>
            <h3 class="title"><em></em>幼儿园信息</h3>
            <div class="content">
              <matts
                :data="gardenOverview"
              ></matts>
            </div>
          </li>
          <li>
            <h3 class="title"><em></em>教师信息</h3>
            <ul class="content">
              <li>
                <pie
                  :data="jobData.data"
                  :color="jobData.color"
                  :title="jobData.title"
                  :pieSize="jobData.pieSize"
                  v-if="jobData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'职称'" />
              </li>
              <li>
                <pie
                  :data="ageData.data"
                  :color="ageData.color"
                  :title="ageData.title"
                  :pieSize="ageData.pieSize"
                  v-if="ageData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'年龄'" />
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import ElMap from '@/common/echarts/Map'
import ElLine from '@/common/echarts/Line'
import Matts from '@/pages/home/healthy/today/components/Matts'
import Pie from '@/common/echarts/Pie'
export default {
  name: 'HealthyToday',
  components: {
    ElMap,
    ElLine,
    Matts,
    Pie
  },
  data () {
    return {
      loading: true,
      mapLoading: true
    }
  },
  computed: {
    allLoading () {
      return this.loading || this.mapLoading
    },
    ...mapState([
      'mapArea'
    ]),
    ...mapGetters({
      averageSleep: 'averageSleep',
      averageExercise: 'averageExercise',
      sleepQuality: 'sleepQuality',
      sportQuality: 'sportQuality',
      gardenOverview: 'gardenOverview',
      ageData: 'ageData',
      jobData: 'jobData'
    })
  },
  watch: {
    allLoading: val => val ? window.$('.refresh').find('i').addClass('loading') : window.$('.refresh').find('i').removeClass('loading'),
    async mapArea (val) {
      if (val) {
        this.loading = true
        // 当前区域总览数据（幼儿园，教师信息）
        await this.$store.dispatch('fetchGeneralOverview')
        this.refresh()
      }
    }
  },
  methods: {
    // 刷新
    async refresh () {
      this.loading = true
      await this.$store.dispatch('fetchSleepOverview')
      await this.$store.dispatch('fetchSportAndSleep')
      this.loading = false
    }
  },
  async mounted () {
    // 初始化所有边框样式
    this.$common.border(window.$('.bottom .content'))
    this.$store.commit('setMapTag', '睡眠/体育活动')

    await this.$store.dispatch('fetchAreaIdList')
    await this.$store.dispatch('fetchGeneralOverview')
    await this.refresh()

    // 5分钟刷新一次
    this._intervalHandle = setInterval(() => {
      this.refresh()
    }, 300000)
  },
  beforeDestroy () {
    clearInterval(this._intervalHandle)
  }
}
</script>

<style lang="stylus" scoped>
.activity
  .statistics
    li:nth-child(1), li:nth-child(2)
      .content
        padding: 20px!important
</style>
